import React from "react"
import { Layout, Menu, Breadcrumb } from 'antd'
const { Header, Content, Footer, Sider } = Layout;
import styles from './index.less'
import { Link } from "umi";
import menuData from "./menuData";


function BasicLayout(props:any) {
  const {
    location: { pathname },
    children
  } = props
  return (
    <Layout>
      <Sider
        breakpoint="lg"
        collapsedWidth='0'
      >
        <div className={styles.logo} />
        <Menu
          theme="dark"
          mode="vertical"
          defaultSelectedKeys={[pathname]} //当前路由地址
          style={{ lineHeight: '64px' }}
        >
        {
          menuData.map(menu => (
            <Menu.Item key={`/${menu.route}`}> 
              <Link to={menu.route} >{menu.name}</Link>
            </Menu.Item>
          ))
        }
        </Menu>
      </Sider>
      <Layout>
        <Header className="site-layout-sub-header-background" style={{ padding: 0 }} />
        <Content style={{ margin: '24px 16px 0' }}>
          <div className="site-layout-background" style={{ padding: 24, minHeight: 360 }}>
            {children}
          </div>
        </Content>
        <Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
      </Layout>
    </Layout>
  )
}

export default BasicLayout